<template>
	<section class="content">
		<topHeader></topHeader>
		<!-- <navbar :title="$t('h_title.xiugaixhifumima')" :right_show="false" :type="1" ref="navbar"></navbar> -->
		<!-- <section class="cont">
			<div class="shurukuangBox">
				<div class="item">
					<p>{{$t('bangding.jiumima')}}:</p>
					<input type="password" v-model="form.old_password"
						:placeholder="$t('common.qingshuru') + $t('bangding.jiumima')">
				</div>
				<div class="item">
					<p>{{$t('bangding.xinmima')}}:</p>
					<input type="password" v-model="form.password"
						:placeholder="$t('common.qingshuru') + $t('bangding.xinmima')">
				</div>
				<div class="item">
					<p>{{$t('bangding.querenmima')}}:</p>
					<input type="password" v-model="form.password_confirmation"
						:placeholder="$t('common.qingshuru') + $t('bangding.querenmima')">
				</div>
				<div class="item" v-if="setting.sms_message">
					<p>{{$t('bangding.yanzhengma')}}: </p>
					<input type="number" v-model="form.code"
						:placeholder="$t('common.qingshuru') + $t('bangding.yanzhengma')">
					<i style="color: #fcc027;font-size: 12px;" v-if="!fasong"
						@click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
					<article v-else>
						<van-count-down ref="countDown" @finish="finish" :time="time" format="ss" />s
					</article>
				</div>
			</div>
			<div class="buttBoxss" @click="fun_submit">
				{{$t('common.queren')}}
			</div>
		</section> -->
		<van-popup v-model="show" class="iframe_alert">
			<div class="baobiaoBox">
				<div class="baobiaoBoxTop">
					<p>{{$t('h_title.xiugaixhifumima')}}</p>
					<img src="../assets/img/guanbi.png" alt="" @click="guanbiBox">
				</div>
			</div>
			<section class="cont">
				<div class="shurukuangBox">
					<div class="item">
						<!-- <p>{{$t('bangding.jiumima')}}:</p> -->
						<img src="../assets/img/14.png" alt="" style="width: 35px;margin-right: 5px;">
						<input type="password" v-model="form.old_password"
							:placeholder="$t('common.qingshuru') + $t('bangding.jiumima')">
					</div>
					<div class="item">
						<!-- <p>{{$t('bangding.xinmima')}}:</p> -->
						<img src="../assets/img/15.png" alt="">
						<input type="password" v-model="form.password"
							:placeholder="$t('common.qingshuru') + $t('bangding.xinmima')">
					</div>
					<div class="item">
						<!-- <p>{{$t('bangding.querenmima')}}:</p> -->
						<img src="../assets/img/15.png" alt="">
						<input type="password" v-model="form.password_confirmation"
							:placeholder="$t('common.qingshuru') + $t('bangding.querenmima')">
					</div>
					<div class="item" v-if="setting.sms_message">
						<!-- <p>{{$t('bangding.yanzhengma')}}: </p> -->
						<img src="../assets/img/16.png" alt="">
						<input type="number" v-model="form.code"
							:placeholder="$t('common.qingshuru') + $t('bangding.yanzhengma')">
						<i style="color: #ffc806;font-size: 12px;" v-if="!fasong"
							@click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
						<article v-else>
							<van-count-down ref="countDown" @finish="finish" :time="time" format="ss" />s
						</article>
					</div>
				</div>
				<div class="buttBoxss" @click="fun_submit">
					{{$t('common.queren')}}
				</div>
			</section>
		</van-popup>
	</section>
</template>

<script>
	import navbar from "@/components/navbar"
	import topHeader from "@/components/topHeader"
	import {
		CountDown
	} from 'vant'
	export default {
		name: "xiugaimima",
		components: {
			navbar,
			[CountDown.name]: CountDown,
			topHeader,
		},
		mounted() {

		},
		data() {
			return {
				time: 60 * 1000 * 2,
				fasong: false,
				form: {
					old_password: '',
					password: '',
					password_confirmation: '',
					code: ''
				},
				phone: this.$store.state.user.phone,
				setting: this.$store.state.config,
				show: true,
			}
		},
		methods: {
			fun_huoqu() { //获取短信验证码

				///处理
				this.$https.fetchGet('/m/msgcode', {
					'phone': this.phone
				}).then(res => {
					this.$toast(res.status.msg)
					this.fasong = true
				}).catch(err => {
					this.$toast('网络异常');
				})
			},
			finish() { //倒计时结束
				this.fasong = false
			},
			fun_submit() { ///确认
				if (this.form.old_password == '') {
					this.$toast(this.$t('common.qingshuru') + this.$t('bangding.jiumima'))
				} else if (this.form.password == '') {
					this.$toast(this.$t('common.qingshuru') + this.$t('bangding.yanzhengma'))
				} else if (this.form.password.length < 6) {
					this.$toast(this.$t('zhuce.password_alert_length'))
				} else if (this.form.password_confirmation == '') {
					this.$toast(this.$t('common.qingshuru') + this.$t('bangding.querenmima'))
				} else if (this.form.password_confirmation != this.form.password) {
					this.$toast(this.$t('zhuce.password_alert_buyizhi'))
				}
				// else if(this.form.code == ''){
				//     this.$toast(this.$t('common.qingshuru') + this.$t('bangding.yanzhengma'))
				// }
				else {
					this.$https.fetchPost('/m/reset_qk_password', this.form).then(res => {
						this.$toast(res.status.msg)
						setTimeout(() => {
							this.$router.push('gerenzhongxin')
						}, 1000)
					}).catch(err => {
						this.$toast('网络异常');
					})
				}
			},
			guanbiBox() {
				this.show = false
				this.$router.back()
			},
		}
	}
</script>

<style scoped lang="less">
	.buttBoxss {
		width: 95%;
		height: 40px;
		color: #fff;
		font-size: 15px;
		line-height: 40px;
		margin: 0px auto;
		background: #f49623;
		// background: linear-gradient(#ffd800, #ffc806);
		border-radius: 20px;
	}

	.shurukuangBox {
		width: 95%;
		margin: 30px auto 0;

		.item {
			display: flex;
			align-items: center;
			height: 40px;
			border: 1px solid #fff;
			border-radius: 20px;
			margin-bottom: 15px;
			padding-left: 20px;
			box-sizing: border-box;
			img {
				width: 40px;
				height: 33px;
			}

			p:nth-child(2) {
				padding-left: 10px;
				height: 33px;
				line-height: 33px;
				font-size: 14px;
				color: #fff;
			}

			input {
				width: 60%;
				color: #fff;
				padding-left: 10px;
				height: 33px;
				background: none;
				font-size: 14px;
				border: 0px;
			}

			article {
				color: #fcc027;
				width: 26%;
				display: flex;
				align-items: center;

				div {
					color: #fcc027;
					margin-right: .1rem;
				}
			}
		}
	}

	.content {
		height: 100vh;
		width: 100%;
		background-image: url('../assets/images/dsfgds.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.cont {
			color: #fff;

			&>article {
				width: 98%;
				margin: 0 auto;
				display: flex;
				padding: 0 .4rem;
				border-bottom: 1px solid #292d30;
				font-size: .4rem;
				line-height: 1.6rem;

				span {
					display: block;
					width: 20%;
					text-align: left;
				}

				input {
					width: 55%;
					color: #fff;
					border: none;
					background: transparent;
				}
				input::placeholder{
					color: #fff;
				}

				article {
					color: #fff;
					width: 26%;
					display: flex;
					align-items: center;

					div {
						color: #fff;
						margin-right: .1rem;
					}
				}
			}

			&>button {
				background: linear-gradient(to bottom, #eb5d4d 0%, #fb2464 100%) !important;
				font-size: .46rem;
				border-radius: .2rem;
				width: 92%;
				margin: 1.5rem auto 0;
				border: none;
				line-height: 1.5rem;
			}
		}
	}

	.iframe_alert {
		width: 94%;
		background-color: #222222;
		margin: 20px auto 0;
		border-radius: 0.2rem;
		height: 90vh;

		.baobiaoBox {
			width: 100%;

			.baobiaoBoxTop {
				width: 100%;
				position: relative;
				text-align: center;
				font-size: 18px;
				background-color: #212429;
				font-weight: 600;
				padding: 10px 0px 25px;
				color: #fff;

				img {
					width: 25px;
					height: 25px;
					position: absolute;
					top: 10px;
					right: 10px;
				}
			}
		}
	}
</style>